<script setup>
  import { ref, onMounted, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { getUserInfoApi } from '@/api'
  import { message } from "ant-design-vue";
  import { ShopOutlined } from '@ant-design/icons-vue'
  import EditUserInfo from "@/views/mine/components/EditUserInfo.vue";
  import EnterShop from "@/views/mine/components/EnterShop.vue";
  import { useUserStore } from '@/stores'
  const router = useRouter()
  const editUserInfoRef = ref()
  const enterShopRef = ref()
  const nav = (name, query) => {
    if (query) return router.push({name, query: { type: query }})
    router.push({ name })
  }
  const visible = ref(false)
  const userInfo = ref({
    name: '',
    desc: '',
    avatar: '',
    mobile: '',
    remark: '',
    level_name: '',
    company_info: '',
    member_level: '',
    coupon_count: '', // 优惠券数量
    goods_collection_count: '', // 商品收藏数量
    identity: '', // 身份标识
    integral: '', // 积分
    integral_goods: [], // 礼品
    shop_collection_count: '', // 店铺收藏数量
  })
  const popover = (name) => {
    visible.value = false
    if (name === 'edit') {
      editUserInfoRef.value.open(userInfo.value)
    } else if (name === 'logout') {
      logout()
    } else {
      nav(name)
    }
  }
  const getUserInfo = () => {
    getUserInfoApi().then((res) => {
      userInfo.value = res.data
    })
  }
  const logout = () => {
    const { logout } = useUserStore()
    logout()
    router.replace({name: 'home'})
  }
  onMounted(() => {
    getUserInfo()
  })
</script>

<template>
  <div class="mine-page">
    <div class="mine-main">
      <div class="mine-left">
        <div class="user-info border">
          <div class="info">
            <img :src="userInfo.avatar" alt="" class="avatar">
            <div class="name-level">
              <div class="name"> 昵称：{{ userInfo.name }}</div>
              <div class="level">
                等级：{{ userInfo.level_name?userInfo.level_name:0 }}
                <a-tag color="var(--primary)"> {{ userInfo.identity }} </a-tag>
              </div>
            </div>
            <div class="setting">
              <a-popover v-model:open="visible" placement="bottomRight">
                <template #content>
                  <div>
                    <a-button type="text" @click="popover('edit')"> 修改资料 </a-button>
                  </div>
                  <div>
                    <a-button type="text" @click="popover('about')"> 关于我们 </a-button>
                  </div>
                  <div>
                    <a-button type="text" @click="popover('help')"> 帮助中心 </a-button>
                  </div>
                  <div>
                    <a-button block type="text" @click="popover('logout')"> 退出登录 </a-button>
                  </div>
                </template>
                <i class="fa-solid fa-gear"></i>
              </a-popover>
            </div>
          </div>
          <div class="mobile"> 联系方式：{{ userInfo.mobile }} </div>
          <div class="desc"> 描述：{{ userInfo.desc?userInfo.desc:'您还没有设置描述信息~' }} </div>
          <div class="desc"> 备注：{{ userInfo.remark?userInfo.remark:'您还没有设置备注信息~' }} </div>
        </div>
        <div class="integral-box border">
          <a-statistic title="我的积分" :value="userInfo.integral?userInfo.integral:0" />
          <div class="more" @click="nav('wallet')"> 查看详情 <i class="fa-solid fa-chevron-right"></i></div>
        </div>
        <div class="border">
          <div class="g-title">
            <div class="title"> 店铺信息 </div>
            <div class="more" v-if="!userInfo.company_info" @click="enterShopRef.open()"> 成为店铺 <i class="fa-solid fa-chevron-right"></i> </div>
          </div>
          <a-tag color="#55acee" v-if="userInfo.company_info">
            <template #icon>
              <ShopOutlined />
            </template>
            {{ userInfo.company_info }}
          </a-tag>
        </div>
      </div>
      <div class="mine-right">
        <div class="grid-box">
          <div class="grid-item" @click="nav('collect', 2)">
            <div class="label">
              <div class="label-name"> 收藏商品 </div>
              <div class="num"> {{ userInfo.goods_collection_count?userInfo.goods_collection_count: '暂未收藏商品'}} </div>
            </div>
            <i class="fa-solid fa-heart size"></i>
          </div>
          <div class="grid-item" @click="nav('collect', 1)">
            <div class="label">
              <div class="label-name"> 收藏店铺 </div>
              <div class="num"> {{ userInfo.shop_collection_count?userInfo.shop_collection_count: '暂未收藏店铺'}} </div>
            </div>
            <i class="fa-solid fa-store size"></i>
          </div>
          <div class="grid-item" @click="nav('coupon', 'my')">
            <div class="label">
              <div class="label-name"> 我的优惠券 </div>
              <div class="num"> {{ userInfo.coupon_count?userInfo.coupon_count: '您还没有优惠券'}} </div>
            </div>
            <i class="fa-solid fa-ticket size"></i>
          </div>
          <div class="grid-item" @click="nav('address')">
            <div class="label">
              <div class="label-name"> 我的地址 </div>
              <div class="num"> 点击查看地址 </div>
            </div>
            <i class="fa-solid fa-map-location-dot size"></i>
          </div>
          <div class="grid-item" @click="nav('gift')">
            <div class="label">
              <div class="label-name"> 礼品专区 </div>
              <div class="num"> 点击查看礼品专区商品 </div>
            </div>
            <i class="fa-solid fa-gift size"></i>
          </div>
        </div>
      </div>
    </div>
    <EditUserInfo ref="editUserInfoRef" @updateUserInfo="getUserInfo"/>
    <EnterShop ref="enterShopRef" />
  </div>
</template>

<style scoped lang="scss">
  .mine-page {
    padding: 10px 0;
    .mine-main {
      display: flex;
      gap: 30px;
      .border {
        padding: 20px;
        border-radius: 10px;
        box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
        .g-title, .c-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
          .title {
            font-weight: bold;
          }
        }
        .more {
          color: #999;
          cursor: pointer;
          font-size: 12px;
          &:hover {
            color: var(--primary);
            transition: all .3s ease-in-out;
          }
        }
      }
      .mine-left {
        gap: 20px;
        display: flex;
        flex-direction: column;
        .user-info {
          gap: 10px;
          display: flex;
          flex-direction: column;
          max-width: 400px;
          .info {
            width: 100%;
            gap: 15px;
            display: flex;
            align-items: end;
            position: relative;
            .avatar {
              width: 100px;
              height: 100px;
              border-radius: 50%;
              object-fit: cover;
              border: 5px solid var(--primary);
            }
            .name-level {
              gap: 5px;
              display: flex;
              flex-direction: column;
              margin-bottom: 10px;
              .name {
                max-width: 220px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            .setting {
              position: absolute;
              top: 0;
              right: 0;
              cursor: pointer;
              &:hover {
                color: var(--primary);
              }
            }
          }
          .desc {
            color: #999;
            padding: 5px 8px;
            border-radius: 10px;
            background-color: #f8f8f8;
          }
        }
        .integral-box {
          display: flex;
          align-items: start;
          justify-content: space-between;
        }
      }
      .mine-right {
        flex: 1;
        .grid-box {
          gap: 20px;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 3fr));
          .grid-item {
            padding: 20px;
            border-radius: 10px;
            background-color: #fff;
            border: 1px solid #f8f8f8;
            box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            &:hover .label>.label-name {
              color: var(--primary);
            }
            .label {
              gap: 5px;
              display: flex;
              flex-direction: column;
              .label-name {
                font-size: 18px;
                font-weight: bold;
                transition: all .3s ease-in-out;
              }
              .num {
                color: #999;
              }
            }
            .size {
              font-size: 30px;
              color: var(--primary);
            }
          }
        }
        //display: flex;
        //flex-direction: column;
        //gap: 20px;
      }
    }
  }

  @media (max-width: 750px) {
    .mine-main {
       display: block !important;
      .info {
        min-width: auto !important;
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
      }
      .grid-box {
        margin-top: 20px;
      }
    }
  }
</style>